<template>
  <div class="placeholder-image" :style="imageStyle">
    <span class="placeholder-text">{{ text }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  width: {
    type: Number,
    required: true
  },
  height: {
    type: Number,
    required: true
  },
  text: {
    type: String,
    default: ''
  }
});

const imageStyle = computed(() => ({
  width: `${props.width}px`,
  height: `${props.height}px`,
  backgroundColor: '#f0f0f0',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  color: '#666666',
  fontSize: '20px',
  fontFamily: 'Arial, sans-serif'
}));
</script>

<style scoped>
.placeholder-image {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.placeholder-text {
  text-align: center;
}
</style> 